<template>
  <div class="doc">
    <article class="article">
      <slot />
    </article>
    <div class="toc-affix mt-16">
      <x-anchor class="toc-anchor" :offset="74">
        <x-anchor-link v-for="(item) in anchors" :key="item.id" :title="item.title" :href="'#' + item.id" />
      </x-anchor>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Anchor {
  id: string
  title: string
}

const props = defineProps<{
  anchors: Anchor[]
}>()
</script>